<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>管理收货地址</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 引入公用样式 -->
    <link rel="stylesheet" href="/static/sass/common/ydui.css" />
    <link rel="stylesheet" href="/static/sass/common/dropload.css" />
    <link rel="stylesheet" href="/static/stylesheets/user/address.css" />
    <style>
        
    </style>
    <!-- 引入自适应解决方案类库 -->
    <script src="/static/scripts/libs/ydui.flexible.js"></script>
</head>
<body>
    <div class="g-flexview">
        <!-- 主体内容开始 -->
        <section class="content_box content" style="margin-bottom: 50px;">
            <div class="lists">
                <!-- 列表 -->
                <div class="address-item">
                    <div class="adr-info">
                        <div class="content_lists">
                            <span class="name">
                                张三
                            </span>
                            <span class="phonenum">
                                010-91283813
                            </span>
                        </div>
                        <div class="adr-detail">
                            北京市海淀区知春路科技大厦 2009
                        </div>
                    </div>
                    <div class="adr_action">
                        <div class="selected">
                              <div id="selDefault" class="selected selected_item"></div>
                              <label>默认地址</label>
                        </div>
                        <a href="/front/user/address/add_address.html" class="edit">
                            <i class="icon-compose"></i> 编辑
                        </a>
                        <div class="del">
                            <i class="icon-delete"></i>删除
                        </div>
                    </div>
                </div>
            </div>

        </section>
        <!-- 底部导航开始 -->
        <footer class="foot-bar">
            <a href="${base}/address/getinfo" class="add_adr">
                新增地址
            </a>
        </footer>
        <!-- 底部导航结束 -->
    </div>
    <!-- 引入jQuery 2.0+ -->
    <script src="/static/scripts/libs/jquery.min.js"></script>
    <!-- 引入YDUI脚本 -->
    <script src="/static/scripts/libs/ydui.js"></script>
    <script src="/static/scripts/libs/dropload.js"></script>
    <script src="/static/scripts/apps/address.js"></script>
</body>
<script>
    $(function () {
        // 页数
        var page = 0;
        // 每页展示10个
        var size = 5

        // dropload
        $('.content').dropload({
            scrollArea: window,
            domUp: {
                domClass: 'dropload-up',
                domRefresh: '<div class="dropload-refresh">↓下拉刷新-自定义内容</div>',
                domUpdate: '<div class="dropload-update">↑释放更新-自定义内容</div>',
                domLoad: '<div class="dropload-load"><span class="loading"></span>加载中-自定义内容...</div>'
            },
            domDown: {
                domClass: 'dropload-down',
                domRefresh: '<div class="dropload-refresh">↑上拉加载更多-自定义内容</div>',
                domLoad: '<div class="dropload-load"><span class="loading"></span>加载中-自定义内容...</div>',
                domNoData: '<div class="dropload-noData">暂无数据-自定义内容</div>'
            },
            //下拉
            loadUpFn: function (me) {
                $.ajax({
                    type: 'GET',
                    url: 'http://ons.me/tools/dropload/json.php?page=' + page + '&size=' + size,
                    dataType: 'json',
                    success: function (data) {
                        var shtml = '';
                        for (var i = 0; i < data.length; i++) {
                            shtml += '<div class="address-item">';
                            shtml += '    <div class="adr-info">';
                            shtml += '        <div class="content_lists">';
                            shtml += '            <span class="name">';
                            shtml += '                张三';
                            shtml += '            </span>';
                            shtml += '            <span class="phonenum">';
                            shtml += '                010-91283813';
                            shtml += '            </span>';
                            shtml += '        </div>';
                            shtml += '        <div class="adr-detail">';
                            shtml += '            ' + data[i].title;
                            shtml += '        </div>';
                            shtml += '    </div>';
                            shtml += '    <div class="adr_action">';
                            shtml += '        <div class="selected">';
                            shtml += '              <div id="selDefault" class="selected selected_item"></div>';
                            shtml += '              <label>默认地址</label>';
                            shtml += '        </div>';
                            shtml += '        <a href="/front/user/address/add_address.html" class="edit">';
                            shtml += '            <i class="icon-compose"></i> 编辑';
                            shtml += '        </a>';
                            shtml += '        <div class="del">';
                            shtml += '            <i class="icon-delete"></i>删除';
                            shtml += '        </div>';
                            shtml += '    </div>';
                            shtml += '</div>';
                            
                        }
                        // 为了测试，延迟1秒加载
                        setTimeout(function () {
                            $('.lists').prepend(shtml);
                            // 每次数据加载完，必须重置
                            me.resetload();
                            // 重置页数，重新获取loadDownFn的数据
                            page = 0;
                            // 解锁loadDownFn里锁定的情况
                            me.unlock();
                            me.noData(false);
                        }, 1000);
                    },
                    error: function (xhr, type) {
                        //alert('Ajax error!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            },
            loadDownFn: function (me) {
                page++;
                // 拼接HTML
                var shtml = '';
                $.ajax({
                    type: 'GET',
                    url: 'http://ons.me/tools/dropload/json.php?page=' + page + '&size=' + size,
                    dataType: 'json',
                    success: function (data) {
                        var arrLen = data.length;
                        if (arrLen > 0) {
                            for (var i = 0; i < arrLen; i++) {
                                shtml += '<div class="address-item">';
                                shtml += '    <div class="adr-info">';
                                shtml += '        <div class="content_lists">';
                                shtml += '            <span class="name">';
                                shtml += '                张三';
                                shtml += '            </span>';
                                shtml += '            <span class="phonenum">';
                                shtml += '                010-91283813';
                                shtml += '            </span>';
                                shtml += '        </div>';
                                shtml += '        <div class="adr-detail">';
                                shtml += '            ' + data[i].title;
                                shtml += '        </div>';
                                shtml += '    </div>';
                                shtml += '    <div class="adr_action">';
                                shtml += '        <div class="selected">';
                                shtml += '              <div id="selDefault" class="selected selected_item"></div>';
                                shtml += '              <label>默认地址</label>';
                                shtml += '        </div>';
                                shtml += '        <a href="/front/user/address/add_address.html" class="edit">';
                                shtml += '            <i class="icon-compose"></i> 编辑';
                                shtml += '        </a>';
                                shtml += '        <div class="del">';
                                shtml += '            <i class="icon-delete"></i>删除';
                                shtml += '        </div>';
                                shtml += '    </div>';
                                shtml += '</div>';
                            }
                            // 如果没有数据
                        } else {
                            // 锁定
                            me.lock();
                            // 无数据
                            me.noData();
                        }
                        // 为了测试，延迟1秒加载
                        setTimeout(function () {
                            // 插入数据到页面，放到最后面
                            $('.lists').append(shtml);
                            // 每次数据插入，必须重置
                            me.resetload();
                        }, 1000);
                    },
                    error: function (xhr, type) {
                        //alert('Ajax error!');
                        // 即使加载出错，也得重置
                         me.lock();
                            // 无数据
                            me.noData();
                        me.resetload();
                    }
                });
            },
            threshold: 50
        });
    });
    
    var dialog = window.YDUI.dialog;
    //选择
    $(document).on('click', '.selected_item', function(){
    	var selectFlag = 0;
        if($(this).hasClass('on')){
            $('.selected_item').removeClass('on')
            //选中状态
            $(this).removeClass('on')
            selectFlag = 1;
        }else{
            $('.selected_item').removeClass('on')
            //未选中
            $(this).addClass('on')
        }
    })
    
    //删除
    $(document).on('click', '.del', function(){
        let that = $(this)
        /* 普通确认框 */
        dialog.confirm('确定删除吗？','', function () {
            dialog.toast('已经删除了', 'none', 1000);
            that.parent().parent().remove()
            //有真是数据以后最好reload ↓
            //location.reload()
        });
        
    })
</script>
</html>
